<template>
  <div class="content">
    <a-space direction="vertical" fill>
      <!-- <div style="display: flex; flex-direction: row-reverse; width: 100%"
        ><a-space
          ><a-button type="outline" @click="isEdit = !isEdit">{{
            isEdit ? '编辑' : '取消编辑'
          }}</a-button>
          <a-button type="primary" @click="save" v-if="!isEdit"
            >保存</a-button
          ></a-space
        >
      </div> -->
      <TitleBox title="基本信息"
        ><template #buts
          ><a-space
            ><a-button type="outline" @click="isEdit = !isEdit">{{
              isEdit ? '编辑' : '取消编辑'
            }}</a-button>
            <a-button type="primary" @click="save" v-if="!isEdit"
              >保存</a-button
            ></a-space
          ></template
        ></TitleBox
      >
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 100px;
        "
      >
        <a-form layout="vertical" :model="form.list" auto-label-width>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="value1"
                label="物料编码："
                label-col-flex="110px"
              >
                <a-input
                  v-model="form.list.number"
                  placeholder="please enter..."
                  :disabled="isEdit"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="value2"
                label="物料名称:"
                label-col-flex="80px"
              >
                <a-input
                  v-model="form.list.name"
                  :disabled="isEdit"
                  placeholder="please enter..."
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="value4"
                label="基本单位:"
                label-col-flex="100px"
              >
                <a-select :disabled="isEdit" v-model="form.list.basicUnitId">
                  <a-option
                    v-for="item in unitData"
                    :key="item.id"
                    :value="item.id"
                    >{{ item.name }}</a-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="value5"
                label="物料分类:"
                label-col-flex="80px"
              >
                <a-tree-select
                  :disabled="isEdit"
                  :data="classficationList"
                  placeholder="请选择物料"
                  allow-clear
                  allow-search
                  :filter-tree-node="filterClassficationData"
                  v-model="form.list.materialId"
                  :field-names="{
                    key: 'id',
                    title: 'name',
                  }"
                ></a-tree-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="value1"
                label="规格型号:"
                label-col-flex="100px"
              >
                <a-input
                  :disabled="isEdit"
                  v-model="form.list.spec"
                  placeholder="please enter..."
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                field="value2"
                label="物料属性:"
                label-col-flex="80px"
              >
                <a-select :disabled="isEdit" v-model="form.list.attribute">
                  <a-option :value="1">自制</a-option>
                  <a-option :value="2">委外</a-option>
                  <a-option :value="3">虚拟</a-option>
                  <a-option :value="4">采购</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-form-item label="包装单位:">
            <a-space direction="vertical" fill>
              <a-table
                :pagination="false"
                :data="form.list.packages"
                :bordered="{ cell: true }"
              >
                <template #columns>
                  <a-table-column title="包装编号" :width="180" align="center">
                    <template #cell="{ record }"
                      ><a-input
                        :disabled="isEdit"
                        v-model="record.name"
                        allow-clear /></template
                  ></a-table-column>
                  <a-table-column title="包装单位" :width="180" align="center">
                    <template #cell="{ record }">
                      <a-select :disabled="isEdit" v-model="record.unitId">
                        <a-option
                          v-for="item in unitData"
                          :key="item.id"
                          :value="item.id"
                          >{{ item.name }}</a-option
                        >
                      </a-select></template
                    ></a-table-column
                  >
                  <a-table-column title="换算方式" :width="180" align="center">
                    <template #cell>
                      <div>与基本单位进行换算 </div></template
                    ></a-table-column
                  >
                  <a-table-column title="换算率" :width="180" align="center">
                    <template #cell="{ record }"
                      ><a-input-number
                        :min="1"
                        v-model="record.conversionRate"
                        :disabled="isEdit" /></template
                  ></a-table-column>
                  <a-table-column title="换算说明" :width="180" align="center">
                    <template #cell="{ record }"
                      ><div
                        v-show="
                          !record.conversionRate || !form.list.basicUnitId
                        "
                        ><span>-</span></div
                      ><div
                        v-show="record.conversionRate && form.list.basicUnitId"
                        ><span>1</span><span>-</span
                        ><span>{{ record.conversionRate }}</span></div
                      ></template
                    ></a-table-column
                  >
                  <a-table-column title="操作" :width="100" align="center">
                    <template #cell="{ rowIndex }">
                      <a-tooltip content="删除">
                        <a-popconfirm
                          content="确认删除？"
                          type="error"
                          :disabled="isEdit"
                          @ok="del(rowIndex)"
                        >
                          <IconFont
                            type="icon-delete"
                            :size="26"
                            :style="{
                              cursor: 'pointer',
                            }"
                          />
                        </a-popconfirm> </a-tooltip></template
                  ></a-table-column>
                </template>
              </a-table>
              <a-button type="text" :disabled="isEdit" @click="addPackages"
                >新增</a-button
              >
            </a-space>
          </a-form-item>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                field="value1"
                label="是否启用:"
                label-col-flex="100px"
              >
                <a-radio-group
                  :disabled="isEdit"
                  v-model="form.list.enable"
                  :default-value="1"
                >
                  <a-radio :value="1">是</a-radio>
                  <a-radio :value="2">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="启用安全库存：">
                <a-radio-group
                  :disabled="isEdit"
                  v-model="form.list.safetyStockState"
                  :default-value="1"
                >
                  <a-radio :value="1">是</a-radio>
                  <a-radio :value="2">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col v-if="form.list.safetyStockState === 1" :span="12">
              <a-form-item label="安全库存：">
                <a-input-number
                  :min="1"
                  :disabled="isEdit"
                  v-model="form.list.safetyStock"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item field="value2" label="备注:" label-col-flex="80px">
                <a-textarea
                  :disabled="isEdit"
                  show-word-limit
                  :max-length="300"
                  :auto-size="{
                    minRows: 5,
                  }"
                  v-model="form.list.remark"
                ></a-textarea>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import { computed, reactive, ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { getoneMaterial } from '@/api/inventory-management/material-management/index';
  import {
    GetClassificationList,
    GetUnitList,
    getMaterialUnitAll,
    PostMaterialList,
  } from '@/api/inventory-management/material-management';

  const route = useRoute();
  const id = Number(route.query.id);
  const qrcodeRef = ref();
  const isEdit = ref(true);
  const form = reactive<any>({ list: {} });
  const getcontractDetailData = async () => {
    try {
      // 获取合同详情
      const res: any = await getoneMaterial({ id });
      form.list = res;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getcontractDetailData();

  const unitData = ref();
  let classficationList: any = ref([]); // 储存物料分类数据
  const getMaterialUnitData = async () => {
    const res = await Promise.all([
      getMaterialUnitAll(),
      GetClassificationList({}),
    ]);
    classficationList.value = res[1];
    unitData.value = res[0];
  };
  getMaterialUnitData();

  // 过滤物料分类数据
  const filterClassficationData = (searchValue: string, nodeData: any) => {
    return nodeData.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
  };

  const addPackages = () => {
    let newKey = form.list.packages.length + 1;
    form.list.packages.push({
      unitId: undefined,
      name: '',
      conversionRate: undefined,
      key: newKey,
    });
  };

  const save = async () => {
    try {
      await PostMaterialList({ ...form.list });
      getcontractDetailData();
      isEdit.value = true;
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const del = (index: number) => {
    form.list.packages.splice(index, 1);
  };
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    padding: 20px;
  }

  :deep(.arco-table-tr) {
    height: 40px;
  }
  :deep(.arco-table-th) {
    font-weight: bold;
  }
</style>
